<% 
local uci = require "luci.model.uci".cursor()
local dsp = require "luci.dispatcher"
local app = self.app_id
local dev = self.dev_id
local app_eui = uci:get("loraserver", app, "eui")
%>
<script type="text/javascript">
	Date.prototype.format = function(format) {
		var o = {
			"M+": this.getMonth() + 1, //month
			"d+": this.getDate(), //day
			"h+": this.getHours(), //hour
			"m+": this.getMinutes(), //minute
			"s+": this.getSeconds(), //second
			"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
			"S": this.getMilliseconds() //millisecond
		}

		if (/(y+)/.test(format)) {
			format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		}

		for (var k in o) {
			if (new RegExp("(" + k + ")").test(format)) {
				format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
			}
		}
		return format;
	}
	function _base64ToArrayBuffer(base64){
		var binary_string =  window.atob(base64);
		var len = binary_string.length;
		var bytes = new Uint8Array( len );
		for (var i = 0; i < len; i++)        {
			bytes[i] = binary_string.charCodeAt(i);
		}
		return bytes.buffer;
	}
	var g_idx = 0;
	function pkt_toggle(idx){

		$("#pkt-d-" + idx).toggle();
	}
	var DATA_ENCODE = "base64"
	$(document).ready(function(){
		
		function live_frame(){
			$.ajax({
				url : '<%=dsp.build_url("admin","loraserver","app","device_live_frame", dev)%>',
				method : 'get',
				dataType : 'json',
				success : function(res){
					try{
						if( res.data){
							
							for( var n = 0; n < res.data.length; n++){
								var item = res.data[n]
								var data = JSON.parse(item.payload);
								
								var type = item.type;
								
								
								var pls = "";
								if( type == "Uplink"){
									if( data.data_encode == "base64"){
										DATA_ENCODE = "base64"
										var pl = _base64ToArrayBuffer(data.data);
										var plv = new DataView(pl);
										for( var idx = 0; idx < plv.byteLength; idx++){
											var bytestr =(plv.getUint8(idx) <= 0x0f ? "0" : "") + plv.getUint8(idx).toString(16);
											pls += bytestr + " ";
										}
									}
									else{
										DATA_ENCODE = "hexstring"
										for( i = 0; i < data.data.length; i+=2){
											pls += data.data.substr(i,2) + " ";
										}
									}
								}
								if( type == "Downlink"){
									if( DATA_ENCODE == "base64"){
										var pl = _base64ToArrayBuffer(data.data);
										var plv = new DataView(pl);
										for( var idx = 0; idx < plv.byteLength; idx++){
											var bytestr =(plv.getUint8(idx) <= 0x0f ? "0" : "") + plv.getUint8(idx).toString(16);
											pls += bytestr + " ";
										}
									}
									else{
										for( i = 0; i < data.data.length; i+=2){
											pls += data.data.substr(i,2) + " ";
										}
										
									}
								}
								$("#live_data_content").prepend("<div class='pkt-item'>\
									<div class='pkt-l' id='pkt-l-"+g_idx+"' \
									onClick='pkt_toggle("+g_idx+")'>\
									<div>"+ (new Date()).format("yyyy/MM/dd hh:mm:ss") +"</div><div>  "+ type+"</div><div>"+pls+"</div>\
									</div>\
									<div class='pkt-d' id='pkt-d-"+g_idx+"' ><pre>"+JSON.stringify(data,null,4)+"</pre></div>\
									</div>");
								g_idx++;
							}
						}
						
					}catch(e){
							console.log(e);
						}
				}
			});
		}
		setInterval(live_frame, 1000);
	});

	
</script>
<style type="text/css">
#live_data_content{
	width:100%;
	height:600px;
	height: 700px;
	overflow-y: scroll;
	overflow-x: scroll;
	border: 1px solid #eee;
}
#live_data_content .pkt-item{
	width: 100%;
	float: left;
}
#live_data_content .pkt-item .pkt-l{
	padding: .75em;
	width: 150%;
	float: left;
	border-bottom: 1px solid #f0f0f0;
}
#live_data_content .pkt-item .pkt-l > div{
	display: block;
	float: left;
	text-align: left;
	padding: 4px 8px;
	white-space: nowrap;
	min-width: 60px;
	text-align: center;
}
#live_data_content .pkt-item .pkt-d{
	float: left;
	width: 100%;
	display: none;
	padding: 4px 16px;
	background: #f9f9f9;

}
#live_data_content .pkt-item .pkt-d > pre{
	border: 0;
	width: 50%;
	float: left;
	margin: 0;
	padding: 0;
	background: transparent;
}
#live_data_header{
	width: 100%;
	display: block;
	float: left;
	padding: 4px 8px;
}
#live_data_header>div{
	font-size: 14px;
	font-weight: bold;
	display: block;
	float: left;
	white-space: nowrap;
	padding: 4px 8px;
	text-align: center;
	min-width: 60px;
}
</style>
<!--<div id="live_data_header">
	<div>fCnt</div>
	<div>fPort</div>
	<div style="width:140px">Gateway</div>
	<div>RSSI</div>
	<div>SNR</div>
	<div>Data</div>
</div>
-->
<div id="live_data_content">

</div>